<template>
    <el-container style="width:1100px">
        <el-header>
            <el-card shadow="always">
                <div style="font-size:16px">我的优惠卷</div>
            </el-card>
        </el-header>
        <el-main>
            <el-card shadow="always" style="height:600px">
                <div class="coup">
                    <el-form inline>
                        <el-form-item>
                            <el-input style="width:500px;" v-model="input" size="large" placeholder="请输入优惠卷兑换码" />
                        </el-form-item>
                        <el-form-item>
                            <el-button color="deeppink" size="large">兑换</el-button>
                        </el-form-item>
                    </el-form>

                    <div class="youhui">
                        <div>
                            <el-icon>
                                <Ticket />
                            </el-icon>
                            领卷中心
                        </div>
                        <div>
                            <el-icon>
                                <Ticket />
                            </el-icon>
                            历史优惠卷
                        </div>
                    </div>
                </div>

                <div>
                    <span style="font-size:16px;color:#DDAA00">* 优惠卷仅用于线下课</span>
                </div>

                <el-table></el-table>
            </el-card>
        </el-main>

    </el-container>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Ticket } from "@element-plus/icons-vue"

const input = ref('')
</script>

<style lang="less" scoped>
.coup {
    display: flex;
    justify-content: space-between;

    .el-form {
        .el-input {
            --el-input-focus-border-color: deeppink;
        }
    }

    .youhui {
        display: flex;
        justify-content: space-between;
        width: 200px;
        height: 40px;

        div {
            line-height: 40px;
            font-size: 16px;
        }
    }
}
</style>
